@import "common.less";

.personal-r{
  height: 857px;
  .layui-tab{
    margin:0;
    .fun-title{
      padding:30px 0 0 60px;
      height: 144px;
      background-color: #fff;
      box-shadow: 0 12px 16px -3px rgba(82,94,140,0.10);
      border-radius: 8px;
      z-index: 9990;
      .fun-title-s{
        font-size: 26px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 26px;
      }
      .layui-tab-title{
        margin-top: 24px;
        border-bottom: none;
        li{
          margin-right: 74px;
          padding: 0;
          font-size: 16px;
          color: #4A4A4A;
          border: none;
        }
        .layui-this{
          border: none;
          color: #2F5AFF;
          &:after{
            border-width: 0;
            border-bottom: 2px solid #2F5AFF;
          }
        }
      }
    }
    .layui-tab-content{
      border-radius: 8px;
      overflow: hidden;
      width: 878px;
      padding: 30px 0 0 60px;
      .layui-tab-item{
        .count-you-have{
          font-size: 14px;
          color: #9B9B9B;
          margin-bottom: 20px;
        }
        .tickets{
          .ticket-list{
            .ticket{
              overflow: hidden;
              background-color: #fff;
              float: left;
              width: 397px;
              height: 155px;
              margin: 0 20px 30px 0;
              &:nth-child(2n){
                margin-right: 0;
              }
              .ticket-over{
                width: 100%;
                height: 102px;
                border: 1px solid #efefef;
                border-bottom: 1px dashed #efefef;
                .t-o-l{
                  float: left;
                  margin: 36px 0 0 20px;
                  font-size: 15px;
                  font-weight:700;
                  .face-value{
                    font-size: 40px;
                    font-style: normal;
                  }
                }
                .t-o-c{
                  float: left;
                  margin: 27px 0  0 34px;
                  .ticket-name{
                    font-size: 20px;
                    color: #4A4A4A;
                    margin-bottom: 18px;
                  }
                  .use-range{
                    font-size: 15px;
                    color: #9B9B9B;
                  }
                }
                .t-o-r{
                  float: right;
                  margin:36px 20px 0 0;
                  .use-now{
                    width: 92px;
                    height: 35px;
                    //background: #FF3A48;
                    //box-shadow: 0 0 4px 0 rgba(255,59,48,0.50);
                    border-radius: 8px;
                    color: #fff;
                    font-size: 15px;
                    border: none;
                  }
                }
              }
              .ticket-down{
                width: 100%;
                border: 1px solid #efefef;
                border-top: none;
                height: 53px;
                position: relative;
                box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
                &::before{
                  position: absolute;
                  left: -8px;
                  top:-8px;
                  width: 16px;
                  height: 16px;
                  background-color: #fff;
                  content:'';
                  display: block;
                  border-radius: 0 8px 8px 0;
                  border: 1px solid #efefef;
                  border-left: none;
                }
                &::after{
                  position: absolute;
                  right: -8px;
                  top:-8px;
                  width: 16px;
                  height: 16px;
                  background-color: #fff;
                  content:'';
                  display: block;
                  border-radius: 8px 0 0 8px;
                  border: 1px solid #efefef;
                  border-left: none;
                }
                .deadline{
                  padding-left:20px;
                  line-height: 53px;
                  font-size: 15px;
                  color: #9B9B9B;
                  i{
                    display: inline-block;
                    font-style: normal;
                  }
                }
              }
            }
          }
          #laypage-f,#laypage-s,#laypage-t{
            .layui-laypage{
              margin: 10px 0 10px 230px;
              a,span{
                overflow: hidden;
                color: #999999;
                text-align: center;
                padding: 0;
                width: 31px;
                height: 31px;
                background: #F8F9FB;
                border-radius: 8px;
                margin-right: 20px;
              }
            }
          }
        }
      }
      .can-use{
        .t-o-l{
          color: #FF3A48;
        }
        .t-o-r{
          .use-now{
            background: #FF3A48;
            box-shadow: 0 0 4px 0 rgba(255,59,48,0.50);
          }
        }
        .ticket-down{
          background: #FFFDFA;
        }
      }
      .has-use,.past-due{
        .t-o-l{
          color: #9B9B9B;
        }
        .t-o-r{
          .use-now{
            background: #9B9B9B;
            box-shadow: 0 0 4px 0 #9B9B9B;
          }
        }
        .ticket-down{
          background: #FFFDFA;
        }
      }
    }

  }
}